<template>
    <div id="app">
        <!-- <div id="app2">
          <h1 v-test="'777'">
            <a href="">aaa</a>
            app
          </h1>
        </div> -->
        <!-- <refCom></refCom> -->
        <!-- <emitsValidate @click="handleClick"></emitsValidate> -->
        <!-- <setupCom :msg="msg"></setupCom> -->
        <!-- <setupSugar m="挖呀挖" :s="msg"></setupSugar> -->
        <usePiniaCom></usePiniaCom>
        <h1>{{ mainStore.msg }}</h1>
    </div>
</template>
<script setup>
import useMainStore from "./store/main.js"

let mainStore = useMainStore();

//vue3不需要nativa修饰符,因为dom原生事件会被绑定到组件的根节点上
//vite中一定要加文件的后缀名
// export default {
//   data() {
//     return {
//       msg: '在小小的花园里面挖呀挖呀挖'
//     }
//   },
//   methods: {
//     handleClick() {
//       console.log('组件的自定义事件click触发了')
//     }
//   },
//   components: {
//     refCom,
//     emitsValidate,
//     setupCom,
//     setupSugar,
//     usePiniaCom
//   }
// }
</script>
<style scoped>
/* 深度选择器 作用在模块化的样式中,模块化样式的时候,样式可能加不上,使用深度选择器可以解决这个问题 */

/* vue2 深度选择器 */
/* #app >>> a {
  color: red
} */
/* #app /deep/ a {
  color: red
} */

/* vue3 使用:deep() */

#app :deep(a) {
    color: green;
}
</style>